<template>
  <view class="finance">
    <mineNavbar :styleData="styleData" />
    <scroll-view class="scroll" scroll-y>
      <view class="catetory">
        <view v-for="item in workTypeArr" :key="item" @click="changeWorkType(item)">
          <view :class="workTypeValue === item ? 'active' : 'common'">{{ item }}</view>
          <image src="../../../../static/images/recruit/wan.png" mode="" v-if="workTypeValue === item" />
        </view>
      </view>
      <view class="backIMG">
        <image class="" :src="backLogo" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />

        <view class="logoDesc" v-if="workTypeValue === '兼职/全职薪酬'">
          <view class="top">
            <view class="balance">
              <view class="desc"> 累计兼职/全职薪酬(元) </view>
              <view class="money">
                <span class="icon">￥</span>
                <text class="moneyItm" selectable="false" space="false" decode="false">
                  {{ wallectInfo.seFullSalary ? wallectInfo.seFullSalary : '00.00' }}
                </text>
              </view>
            </view>
          </view>
          <view class="cumulative">
            <view class="left">
              <text>累计薪酬(元)</text>
              <text>￥ {{ wallectInfo.totalSalary ? wallectInfo.totalSalary : '00.00' }}</text>
            </view>
            <view class="banKBtn" @click="toPath">
              <text> 银行账号 </text>
            </view>
          </view>
        </view>
        <view class="logoDesc" v-else>
          <view class="top">
            <view class="balance">
              <view class="desc"> 累计零工报酬(元) </view>
              <view class="money">
                <span class="icon">￥</span>
                <text class="moneyItm" selectable="false" space="false" decode="false">
                  {{ wallectInfo.seOddSalary ? wallectInfo.seOddSalary : '00.00' }}
                </text>
              </view>
            </view>
            <view class="balance">
              <view class="desc"> 可提现零工报酬(元) </view>
              <view class="money">
                <span class="icon">￥</span>
                <text class="moneyItm" selectable="false" space="false" decode="false">
                  {{ wallectInfo.seBalance ? wallectInfo.seBalance : '00.00' }}
                </text>
              </view>
            </view>
          </view>
          <view class="cumulative">
            <view class="left">
              <text>累计薪酬(元)</text>
              <text>￥ {{ wallectInfo.totalSalary ? wallectInfo.totalSalary : '00.00' }}</text>
            </view>
            <view class="right">
              <view class="banKBtn1">
                <image src="../image/bank.png" />
                <view class=" r_text">
                  <text @click="handlePayout"> 立即提现 </text>
                  <text @click="toPath"> 银行账号 </text>
                  <view class="line"></view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="dateTab">
          <view class="date">
            <text class="account"> 薪酬流水 </text>
          </view>
        </view>
      </view>
      <view style="height: 20rpx" />
      <view class="bottom">
        <scroll-view class="list_scroll" v-if="wallectWaterArr.length" scroll-y @scrolltolower="scrollBottomFn">
          <view class="list" v-for="item in wallectWaterArr" :key="item">
            <view class="list-content">
              <view class="l-list">
                <view class="peo"> {{ item.title || '无' }} </view>
                <view class="time"> {{ item.content }} {{ item.paymentTime }} </view>
              </view>

              <view class="r-list">
                <span v-if="item.status === '2'" class="icon-">-￥</span>
                <span v-else class="iconAdd">+￥</span>
                <span class="numAdd">{{ item.salary }}</span>
              </view>
            </view>
          </view>
          <view class="w_bottom">- 加载完成，共{{ wallectWaterArr.length }}条数据 -</view>
        </scroll-view>
        <noneState v-else></noneState>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getWallet, getFullTimeLog, getPartTimeLog, withdrawDeposit } from "@/api/pages/mine.js"
import noneState from '@/pages/recruit/components/noneState.vue'

export default {
  components: { noneState },
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      styleData: {
        show: true,
        tabbarText: "我的钱包",
      },
      pageSize: 50,
      pageNum: 1,
      pageTotal: 1,
      backLogo: require("../image/backLogo.png"),
      dateIcon: require("../image/bank.png"),
      workTypeArr: ['零工报酬', '兼职/全职薪酬'
      ],
      workTypeValue: '零工报酬',
      itemActive: "全部",
      items: [
        {
          name: "全部",
        },
        {
          name: "收入",
        },
        {
          name: "支出",
        },
      ],
      date: currentDate,
      wallectInfo: '',
      wallectWaterArr: []
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) { },
  onShow() { },
  onReady() { },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  mounted() {
    this.getWallectInfoFun()
  },
  methods: {
    // 切换类型
    changeWorkType(e) {
      this.workTypeValue = e
      this.pageNum = 1
      if (e === '兼职/全职薪酬') {
        getFullTimeLog({
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }).then((res) => {
          if (res.code === 200) {
            this.pageTotal = Math.ceil(res.total / this.pageSize)
            this.wallectWaterArr = res.rows
          }
        })
      } else {
        getPartTimeLog({
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }).then((res) => {
          if (res.code === 200) {
            this.pageTotal = Math.ceil(res.total / this.pageSize)
            this.wallectWaterArr = res.rows
          }
        })
      }
    },

    // 获取时间
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange(e) {
      console.log(e, "eee");
    },

    // 跳转银行账户
    toPath() {
      uni.navigateTo({
        url: '/pages/recruit/mine/bank/index'
      })
    },
    // 跳转提现页
    handlePayout() {
      let that = this
      uni.showModal({
        title: "提现确认",
        content: "每次提现均需要扣除1元手续费，请确认是否立即提现",
        cancelText: "取消",
        confirmText: "确定提现",
        success: function (res) {
          if (res.confirm) {
            if (+that.wallectInfo.seBalance > 1) {
              withdrawDeposit().then((res) => {
                if (res.code === 200) {
                  uni.showToast({
                    title: res.msg,
                    icon: "none"
                  })
                  that.getWallectInfoFun()
                }
              })
            } else {
              uni.showToast({
                title: '提现余额不足',
                icon: "none"
              })
            }
          }
        }
      })
      // uni.navigateTo({
      //   url: '/pages/recruit/mine/bank/index'
      // })
    },
    // 获取我的钱包信息和薪资流水
    getWallectInfoFun() {
      getWallet().then((res) => {
        if (res.code === 200) {
          this.wallectInfo = res.data
        }
      })
      getPartTimeLog({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.code === 200) {
          this.pageTotal = Math.ceil(res.total / this.pageSize)
          this.wallectWaterArr = res.rows
          console.log(this.wallectWaterArr);
        }
      })
    },
    // 监听滑动到底部
    scrollBottomFn() {
      console.log('到底了');
      this.pageNum += 1
      if (this.pageNum <= this.pageTotal) {
        if (this.workTypeValue === '兼职/全职薪酬') {
          getFullTimeLog({
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }).then((res) => {
            if (res.code === 200) {
              res.rows.forEach((suc) => {
                this.wallectWaterArr.push(suc)
              })
            }
          })
        } else {
          getPartTimeLog({
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }).then((res) => {
            if (res.code === 200) {
              res.rows.forEach((suc) => {
                this.wallectWaterArr.push(suc)
              })
            }
          })
        }
        this.getProductInfoListFun()
      } else {
        uni.showToast({
          title: '没有更多了',
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.finance {
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;

  .scroll {
    flex: 1;
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .catetory {
      width: 100%;
      height: 120rpx;
      display: flex;
      justify-content: space-around;

      >view {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .active {
          font-weight: 900;
          font-size: 32rpx;
          color: #000;
        }
      }

      image {
        width: 35rpx;
        height: 6px;
        margin-top: 5px;
      }
    }

    .backIMG {
      position: relative;
      width: 750rpx;
      height: 400rpx;

      image {
        width: 100%;
        height: 450rpx;
      }

      .logoDesc {
        position: absolute;
        top: 62rpx;
        left: 0rpx;
        width: 100%;

        .top {
          display: flex;
        }

        .balance {
          margin-left: 60rpx;

          .desc {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            letter-spacing: 0;
            opacity: 0.64;
          }

          .money {
            .icon {
              font-family: PingFangSC-Medium;
              font-weight: 500;
              font-size: 32rpx;
              color: #ffffff;
              letter-spacing: 0;
            }

            .moneyItm {
              font-family: DINAlternate-Bold;
              font-weight: 700;
              font-size: 48rpx;
              color: #ffffff;
              letter-spacing: 0;
            }
          }
        }

        .cumulative {
          display: flex;
          width: 85%;
          height: 100rpx;
          border-top: 1px rgba(255, 255, 255, .2) solid;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          margin-left: 60rpx;
          margin-top: 30rpx;
          color: #fff;
          font-size: 24rpx;

          .right {
            display: flex;
          }
        }

        .banKBtn {
          width: 149rpx;
          height: 58rpx;
          background: url("../image/bank.png");
          background-size: cover;
          text-align: center;

          text {
            line-height: 58rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            letter-spacing: 0;
          }
        }

        .banKBtn1 {
          width: 300rpx;
          height: 58rpx;
          position: relative;

          image {
            width: 400rpx;
            height: 58rpx;
          }

          .r_text {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 50%;
            right: -32rpx;
            transform: translateY(-50%);
            width: 288rpx;
            height: 56rpx;
            border: 1rpx solid rgba(255, 255, 255, .2);
            background: rgba(255, 255, 255, .2);
            font-size: 24rpx;
            border-radius: 56rpx 0 0 56rpx;

            .line {
              position: absolute;
              width: 2rpx;
              height: 10rpx;
              background: rgba(255, 255, 255, .5);
              top: 50%;
              height: 50%;
              transform: translate(-50%, -50%);
            }

            >text {
              margin: 0 20rpx;
            }
          }
        }
      }

      .dateTab {
        position: absolute;
        bottom: -20rpx;
        width: 750rpx;
        height: 60rpx;
        border-radius: 32rpx;
        padding: 0 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;

        .date {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .account {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 36rpx;
            color: #000000e0;
          }

          .day {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 180rpx;
            height: 64rpx;

            background: #ffffff;
            border-radius: 32rpx;

            image {
              padding-top: 8rpx;
              width: 32rpx;
              height: 32rpx;
            }

            .select {
              font-family: PingFangSC-Medium;
              font-weight: 500;
              font-size: 24rpx;
              color: #000000a3;
              letter-spacing: 0;
            }
          }
        }

        .tab {
          width: 702rpx;
          display: flex;

          .item {
            width: 134rpx;
            height: 56rpx;
            line-height: 56rpx;
            text-align: center;
            background: #ff9e24;
            border-radius: 32rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            letter-spacing: 0;
            margin-right: 16rpx;
          }

          .item-default {
            width: 134rpx;
            height: 56rpx;
            line-height: 56rpx;
            text-align: center;
            background: #ffffff;
            border-radius: 32rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #000000;
            opacity: 0.64;
            letter-spacing: 0;
            margin-right: 16rpx;
          }
        }
      }
    }

    .bottom {
      position: relative;
      height: calc(100vh - 670rpx);

      .list_scroll {
        height: 100%;

        .list {
          width: 702rpx;
          padding: 0 24rpx;
          margin-bottom: 20rpx;

          .integralTime {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 28rpx;
            color: #000000a3;
            letter-spacing: 0;
            margin-top: 32rpx;
            margin-bottom: 16rpx;
          }

          .list-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 145rpx;
            background: #ffffff;
            border-radius: 16rpx;

            .l-list {
              padding-left: 24rpx;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              font-size: 28rpx;
              color: #000000e0;
              letter-spacing: 0;
              width: 65%;

              .peo {
                font-family: PingFangSC-Medium;
                font-weight: 500;
                font-size: 28rpx;
                color: #000000e0;
                letter-spacing: 0;
                margin-bottom: 8rpx;
              }

              .time {
                font-family: PingFangSC-Medium;
                font-weight: 500;
                font-size: 24rpx;
                color: #00000073;
                letter-spacing: 0;
              }
            }

            .r-list {
              padding-right: 10rpx;
              width: 30%;
              box-sizing: border-box;
              margin-left: 30rpx;
              max-height: calc(100vh - 500rpx);

              .icon- {
                color: #ff9e24;
                font-size: 28rpx;
                font-face: PingFangSC;
                font-weight: 700;
                line-height: 0;
                letter-spacing: 0;
                paragraph-spacing: 0;
                text-align: left;
              }

              .iconAdd {
                color: #ff9e24;
                font-size: 28rpx;
                font-face: PingFangSC;
                font-weight: 700;
                line-height: 0;
                letter-spacing: 0;
                paragraph-spacing: 0;
                text-align: left;
              }

              .num {
                color: #317ed0;
                font-size: 36rpx;
                font-face: DINAlternate;
                font-weight: 700;
                line-height: 0;
                letter-spacing: 0;
                paragraph-spacing: 0;
                text-align: left;
              }

              .numAdd {
                color: #ff9e24;
                font-size: 36rpx;
                font-face: DINAlternate;
                font-weight: 700;
                line-height: 0;
                letter-spacing: 0;
                paragraph-spacing: 0;
                text-align: left;
              }
            }
          }
        }
      }
    }

    .w_bottom {
      font-size: 24rpx;
      color: #00000033;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      margin-bottom: 20rpx;
    }
  }
}
</style>
